<script setup lang="ts">
import { dynamicNews, homeDynamic } from '~/api'

const { basicInfo } = storeToRefs(useTeamInfoStore())
const newsId = useRoute().query?.newsId
const beforPath = useRoute().query?.beforPath

// 有两个入口，分别是首页的大赛动态和大赛动态页的新闻
const GetApi = beforPath == 'home' ? homeDynamic : dynamicNews

onMounted(async () => {
  const res = basicInfo.value?.scheduleId ? await GetApi(basicInfo.value.scheduleId) : { data: [] }
  newsArr.value = res.data
  console.log(newsArr)
  ActiveIndex.value = res.data.findIndex(item => item.newsId == newsId)
})

const newsArr = ref([])
const ActiveIndex = ref(-1)

function ActiveIndexChange(isflag) {
  isflag ? ActiveIndex.value-- : ActiveIndex.value++
}

function share() {
  const url = window.location.href
  const oInput = document.createElement('input')
  oInput.value = url // 这里填写需要复制的值
  document.body.appendChild(oInput)
  oInput.select() // 选择对象
  document.execCommand('Copy') // 执行浏览器复制命令
  oInput.className = 'oInput'
  oInput.style.display = 'none'
  message.info('地址已复制')

  document.body.removeChild(oInput)
}
</script>

<template>
  <div w-full px="1/10" m="y-10px" class="news-detail">
    <div v-if="ActiveIndex !== -1">
      <div m="b-30px t-20px" text="20px left">
        {{ newsArr[ActiveIndex].title }}
      </div>
      <div m="b-20px" p="b-20px" text="16px" style="color:#949393;border-bottom:1px solid #EBEBEB">
        {{ newsArr[ActiveIndex].publishTime }}
      </div>
      <div v-html="newsArr[ActiveIndex].content" />
      <div class="py-4" m="t-20px" text="right" style="border-top:1px solid #EBEBEB">
        <n-button text class="text-primary!" @click="share">
          分享
        </n-button>
      </div>
      <n-button v-if="ActiveIndex >= 1" class="text-primary!" text @click="ActiveIndexChange(true)">
        上一篇 {{ newsArr[ActiveIndex - 1].title }}
      </n-button>
      <n-button v-if="ActiveIndex < newsArr.length - 1" class="text-primary!" text @click="ActiveIndexChange(false)">
        下一篇 {{ newsArr[ActiveIndex + 1].title }}
      </n-button>
    </div>
  </div>
</template>

<style scoped>
:deep(.n-scrollbar-rail.n-scrollbar-rail--vertical) {
  display: none;
}
.news-detail::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.news-detail {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
